import { ActionSheet, Image, Overlay } from '@nutui/nutui-react';
import { useState } from 'react';

import { useGlobal } from '@/application/context/global';
import { useUser } from '@/application/hooks/use-user';
import { isWeChat } from '@/application/utils';
import { share } from '@/application/utils/share';

import { useHome } from '../context';
export default function ShareActionSheet() {
  const { showShareActionSheet, setShowShareActionSheet } = useHome();
  const { goodInfo } = useGlobal();
  const [weixinShare, setWeixnShare] = useState(false);
  const { user } = useUser();
  const handleShare = (item: any) => {
    if (isWeChat()) {
      setWeixnShare(true);
    }

    share({
      content: '帮我集拼图，一起赢好礼',
      title: `快来帮我领取${goodInfo?.goodsName}`,
      url: `${window.location.origin}/invitee/${user?.userId}`
    });
  };
  return (
    <>
      <Overlay
        visible={weixinShare}
        zIndex={99999}
        onClick={() => {
          setWeixnShare(false);
        }}
      >
        <img
          src={new URL('/images/home/tishi.png', import.meta.env.VITE_IMG_BASE_URL).href}
          className="absolute right-0"
          onClick={() => {
            setWeixnShare(false);
          }}
        />
      </Overlay>
      <ActionSheet
        visible={showShareActionSheet}
        cancelText={'取消'}
        onSelect={() => {
          setShowShareActionSheet(false);
        }}
        onCancel={() => setShowShareActionSheet(false)}
      >
        <div className="flex items-center justify-between bg-[#F7F7F7] py-10">
          {[
            { title: '分享好友', icon: '/images/home/wechat.png', key: 'wechat' },
            { title: '分享朋友圈', icon: '/images/home/pyq.png', key: 'wechat-moments' }
          ].map((item) => (
            <div
              className="flex flex-1 flex-col items-center justify-center"
              key={item.key}
              onClick={() => {
                handleShare(item);
              }}
            >
              <Image src={item.icon} className="h-12.5 w-12.5" />
              <span className="mt-2.5 text-[13px] text-[#666666]">{item.title}</span>
            </div>
          ))}
        </div>
      </ActionSheet>
    </>
  );
}
